<template>
<div class="box">
    <fou-dialog :title="'選擇套票'" v-model:dialogValue="dialogValue" :width="'75%'">
        <template #content="">
                <el-button color="#081F42" :disabled="delsable" @click="choice">多選</el-button>
                <ProTable
                :data="tableData"
                :page="page"
                :column="column"
                :rowControl="[]"
                :elProps="elProps"
                :disabled="[]"
                :controlWidth="controlWidth"
                @page-change="onPageChange"
                @selection-change="onSelectionChange"
                @pageRefresh="pageRefresh"
                
                >
                <template #default="{ row, propname }">
                        <div v-if="propname === 'ticket_item'">
                            <ProTable
                                :data="row[propname]"
                                :column="{  num:'套票數量',price:'金額',deadline:'使用期限(天)'}"
                                :elProps="{border:true}"
                                :page="[]"
                                :rowControl="[]"
                                :disabled="[]"
                                :controlWidth="[]"
                                >
                            </ProTable>
                        </div>
                </template>
                <template #search_operate>
                    <el-table-column  fixed="right" max-width="200px" >
                        <template #header>
                                <el-input @keyup.enter="getSearch" clearable v-model="search" placeholder="搜索(內容)" class="input">
                                    <template #append>
                                    <el-button icon="Search" @click="getSearch"></el-button>
                                    </template>
                                </el-input>
                        </template>
                        <template #default="scope">
                            <el-button  color="#081F42"  @click="handleSelect(scope.$index, scope.row)" >選擇</el-button >
                        </template>
                    </el-table-column>
                </template>
                </ProTable>
        </template>
    </fou-dialog>
</div>
</template>

<script setup>
import { ref ,reactive} from 'vue' 
import {tickets} from '@/http/index.js'
import {elProps,controlWidth} from './ticket'
import { loading ,closeLoading} from '@/common/function.js'

const emit = defineEmits(['update'])
const handleSelect=(index,row)=>{
  let value = [row]
 emit('update',value)
 dialogValue.value = false
}
const delsable = ref(true);
const check_group = ref([])
const onSelectionChange = (e) => {
  check_group.value = e
  delsable.value = e.length === 0;
};

const choice = ()=>{
     emit('update',check_group.value)
     dialogValue.value = false
}

const page = reactive({current_page: 1,per_page: 10,total: 10,page_size: [10, 20, 30]})
const search = ref('')
const getSearch = async()=>{
    obj.name = search.value
    await TableData()
}
const onPageChange = async({ e, type }) => {
  console.log(e, type);
  if (type == "current") {
    obj.page = e;
  }
  if (type == "size") {
    obj.page = 1
    obj.limit = e;
  }
    await TableData()
};
const pageRefresh = async () => {
  obj.page = 1
  await TableData();
};

const obj = reactive({
  school_id:localStorage.getItem('school_id'),
  page: page.current_page,
  limit: page.per_page,
  name: '',
});
const dialogValue = ref(false)
const tableData = ref([])
const TableData = async()=>{
    loading()
    const data = await tickets(obj)
    if (data.code == 200 ) {
        tableData.value = data.data.data
    }
    closeLoading()
}
const column = {
    name:'套票名稱',
    ticket_item:'套票規格',
}
defineExpose({
dialogValue,TableData
})
</script>

<style lang='less'  scoped>
.box{
  :deep(.el-dialog__body){
  padding:0 20px!important;
  }
  :deep(.el-dialog__footer){
    padding: 0 !important;

  }
  :deep(.tableflex[data-v-0985d712]){
    margin-top: 15px;
  }
}
</style>